<template>
  <div class="container" v-show="show">
    <div class="image-poster">
      <img class="image" :src="img">
      <img class="image-tag" src="../images/essay@tag.png">
    </div>
    <span class="content">{{content}}</span>
  </div>
</template>

<script>
export default {
  name: 'Essay',
  props: {
    img: String,
    content: String,
    show: Boolean
  }
}
</script>

<style lang="stylus" scoped>
  .container
    display: flex
    flex-direction: column
    align-items: center
    .image-poster
      width: 100%
      padding-bottom: 66.66%
      overflow: overflow
      height: 0
      .image
        width: 100%
      .image-tag
        width: .46rem
        height: 1.42rem
        position: relative
        left: .3rem
        bottom: .58rem
    .content
      margin-top: 1.2rem
      font-size: .34rem
      max-width: 5.5rem
</style>
